<template>
	<!-- 主要布局页面 -->
	<div>
		<el-container style="height: 600px; border: 1px solid #eee">
			<el-aside width="200px" style="border: 2px #eee solid;">
				<el-tree :data="goodsTypeData" node-key="id" :props="defaultProps" 
					accordion @node-click="selType">
				</el-tree>
			</el-aside>
			<el-main>
				<div >
				<!-- 表格 -->
				    <div>
				        <el-table
				                ref="multipleTable"
				                tooltip-effect="dark"
				                :data="tableData"
				                stripe
				                style="width: 100%">
				            <el-table-column
				                    prop="code"
				                    label="商品编号"
				                    width="80">
				            </el-table-column>
				            <el-table-column
				                    prop="name"
				                    label="商品名称"
				                    width="180">
				            </el-table-column>
							<el-table-column
							        prop="model"
							        label="型号"
							        width="100">
							</el-table-column>
							<el-table-column
							        prop="unit"
							        label="单位"
							        width="100">
							</el-table-column>
							<el-table-column
							        prop="purchasingPrice"
							        label="采购价"
							        width="90">
							</el-table-column>
							<el-table-column
							        prop="sellingPrice"
							        label="出售价"
							        width="100">
							</el-table-column>
							<el-table-column
									prop="inventoryQuantity"
							        label="当前库存"
									width="100">
									<template slot-scope="scope">
										{{scope.row.inventoryQuantity}} {{scope.row.unit}}
									</template>
							</el-table-column>
							<el-table-column
							        prop="minNum"
							        label="库存下线"
							        width="100">
							</el-table-column>
				           <el-table-column
				                   prop="producer"
				                   label="生产厂商"
				                   >
				           </el-table-column>
				        </el-table>
				    </div>
				    <div class="block">
				        <el-pagination
				                @size-change="handleSizeChange"
				                @current-change="handleCurrentChange"
				                :current-page="goodsVo.currentPage"
				                :page-sizes="[4, 7, 10, 20]"
				                :page-size="goodsVo.sizePage"
				                layout="total, sizes, prev, pager, next, jumper"
				                :total="total">
				        </el-pagination>
				    </div>
				</div>
			</el-main>
		</el-container>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				filterText: '',
				//树形控件数据
				goodsTypeData: [],
				//修改树形控件默认值
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				//表格中的数据，由后端传值
				tableData: [],
				//商品后台接收对象
				goodsVo: {
					name: '',
					typeId: 0,
					currentPage: 1,
					sizePage: 4,
				},
				//总记录数
				total: 20,
			}
		},
		methods: {
			selGoodsType() {
				//const state = data.state;
					this.postRequest("/goodstype/selectTypeOfTier?pid=-1").then(res=>{
						this.goodsTypeData=res.data.goodstypeList;
					})
			},
			//页面加载完后调用的方法
			queryDate(){
				this.postRequest('/goods/likeQuery',this.goodsVo).then(result=>{
					this.tableData=result.data.list;
					this.total=result.data.total;
				})
			},
			//选中菜单按类型查询
			selType(data){
				console.log(data);
				if(data.state==0 || data.id==1){
					this.goodsVo.typeId=data.id;
					this.goodsVo.currentPage=1;
					this.postRequest('/goods/likeQuery',this.goodsVo).then(result=>{
						this.tableData=result.data.list;
						this.total=result.data.total;
					})
				};
			},

	
			//关于分页
			handleSizeChange(val){
				this.goodsVo.sizePage=val;
				this.queryDate();
			},
			handleCurrentChange(val){
				this.goodsVo.currentPage=val;
				this.queryDate();
			},



		},
		mounted() {
			this.queryDate();
			this.selGoodsType();
		}

	}
</script>

<style>
</style>